<template>
    <view>
        <view class="top_box u-flex u-row-between">
            <view>课程数量：{{ shopList.length }}</view>
            <view @click.stop="editState = !editState">{{ editState ? '完成' : '编辑' }}</view>
        </view>
        <view v-if="shopList.length > 0"
              class="shopList_box padding_box margin_bottom_140">
            <view class="container_box"
                  v-for="(item,index) in shopList"
                  @click="selectItem(item,index)"
                  :key="index">
                <view class="u-flex u-row-between">
                    <view class="edit_select"
                          :class="{'show': editState}">
                        <image :src="item.select ? '/static/images/selected.png' : '/static/images/select.png'"
                               mode="" />
                    </view>
                    <image class="shop_img"
                           :src="item.productPic"
                           mode="" />
                    <view class="right_box u-flex-col u-row-between">
                        <view class="curriculum_title  u-line-1">{{ item.productName }}</view>
                        <view v-if="item.productSku"
                              @click.stop="editSku(item,index)"
                              class="sp_box u-flex u-row-between">
                            <view class="u-flex ">
                                <view class="details_info_text"
                                      v-for="(item1,index1) in item.productSku.spData"
                                      :key="index1">{{ item1.value }}{{ (item.productSku.spData.length>0 && index1<(item.productSku.spData.length-1))? '+':'' }}</view>
                            </view>
                            <image class="more_img"
                                   src="/static/images/mine/mine_more_hui@2x.png"
                                   mode="" />
                        </view>
                        <view class="right_bottom_box u-flex u-row-between">
                            <view v-if="item.classSchedule && item.classSchedule.week"
                                  class="week_text">{{ JSON.parse(item.classSchedule.week).join(',') }}上课</view>
                            <view class="price_number u-flex u-col-center">
                                <span>￥</span>
                                <span class="price">{{ item.productSku.priceStr }}</span>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="load_box"
                  v-if="shopList.length >= 5">
                <u-loadmore :status="loadingStatus" />
            </view>
        </view>
        <view v-else>
            <meu-empty top="50vh"
                       tipText="购物车空空如也" />
        </view>
        <view style="height: 1px;"></view>
        <div class="footer_box safe-area-inset-bottom u-flex u-row-between">
            <view class="u-flex u-col-center">
                <view class="u-flex edit_select"
                      @click="selectAllFun">
                    <image style="margin-right: 10rpx;"
                           :src="selectAll ? '/static/images/selected.png' : '/static/images/select.png'"
                           mode="" />
                    <view>全选</view>
                </view>
                <view class="price_number u-flex u-col-center">
                    <span class="text">实付款</span>
                    <span>￥</span><span class="price">{{ getTotalPrice }}</span>
                </view>
            </view>
            <u-button class="mini_btn_box"
                      v-if="!editState"
                      @click="orderPay"
                      type="primary"
                      :custom-style="customStyle"
                      :disabled="canSignUp"
                      :ripple="true"
                      shape="circle">{{  '去结算' }}</u-button>
            <u-button class="mini_btn_box"
                      v-else
                      @click="showModel = true"
                      type="warning"
                      :custom-style="customStyle"
                      :disabled="canSignUp"
                      :ripple="true"
                      shape="circle">{{  '删除'  }}</u-button>
        </div>
        <u-popup v-model="buyModelShow"
                 safe-area-inset-bottom
                 closeable
                 mode="bottom"
                 border-radius="28">
            <view class="buy_box">
                <view class="hear_box u-flex">
                    <image class="buy_img"
                           :src="currentSkuData.pic"
                           mode="" />
                    <view class="price_number">
                        <span>￥</span><span class="price">{{ currentSkuData.priceDouble }}</span>
                    </view>
                </view>
                <view class="border_box"></view>
                <view v-for="(item,index) in specificationsList"
                      :key="index">
                    <view class="buy_title">{{ item.name }}
                        <!-- <span class="details_text_999">（不含材料费，材料自愿购买）</span> -->
                    </view>
                    <scroll-view class="sku_item_box"
                                 scroll-with-animation
                                 show-scrollbar="false"
                                 scroll-x>
                        <!--  :class="{'active': specialSpecSelectIndexArr[index] == index1 && checkSpecialSpecList[index][index1], 'disabled':!checkSpecialSpecList[index][index1]}" -->
                        <view class="sku_item"
                              :class="{'active': specialSpecSelectIndexArr[index] == index1, }"
                              v-for="(item1,index1) in item.values"
                              :key="index1"
                              @click="changeSpecification(index, index1)">
                            {{ item1 }}
                        </view>
                    </scroll-view>
                </view>
                <u-button @click="confirmOrder"
                          type="primary"
                          :disabled="checkSpecialSpec"
                          :custom-style="customStyle1"
                          :ripple="true"
                          shape="circle"> 确定 </u-button>
            </view>
        </u-popup>
        <u-popup v-model="showModel"
                 mode="center"
                 border-radius="32"
                 width="80%">
            <view class="padding_box u-col-center u-flex-col u-row-center">
                <view class="title">删除课程</view>
                <view class="info">确定要删除选中的课程吗</view>
                <view class="btn_box u-flex u-row-between">
                    <u-button @click="showModel = false"
                              :custom-style="{  
                                flex: 1,
                                border: '1rpx solid #cccccc',
                                color: '#333',
                                height: '80rpx',
                                background: '#fff',
                                borderRadius: '40rpx',}"
                              type="primary"
                              ripple
                              shape="circle"> 取消 </u-button>
                    <u-button style="margin-left:15rpx"
                              @click="deleteShopCart"
                              type="primary"
                              :custom-style="{ flex: 1,
                                color: '#fff',
                                height: '80rpx',
                                background: '#63B9F2',
                                borderRadius: '40rpx',}"
                              :ripple="true"
                              shape="circle"> 确认 </u-button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            editState: false,
            shopList: [],
            loadingStatus: 'loadmore',
            buyModelShow: false,
            selectAll: false,
            selectArr: [],
            showModel: false,
        }
    },
    onShow() {

    },
    onLoad() {
        this.GetShopCartList()
    },
    mounted() {
    },
    computed: {
        canSignUp() {
            let statu = true
            let selectNum = 0
            let selectArr = []
            this.shopList.forEach(ele => {
                if (ele.select) {
                    statu = false
                    selectNum++
                    selectArr.push(ele)
                }
            });
            this.selectArr = selectArr
            if (selectNum == this.shopList.length) {
                this.selectAll = true
            } else {
                this.selectAll = false
            }
            return statu
        },
        getTotalPrice() {
            let price = 0
            this.shopList.forEach(ele => {
                if (ele.select) {
                    price += ele.productSku && ele.productSku.price
                }
            });
            return price / 100
        },
    },
    methods: {
        GetShopCartList() {
            this.$api.getShopCartList({}, res => {
                if (res.code == 0 && res.data) {
                    res.data.forEach(ele => {
                        ele.select = false
                        ele.productSku.spData = JSON.parse(ele.productSku.spData)
                    });
                    this.shopList = res.data
                }
            });
        },
        deleteShopCart() {
            let ids = this.selectArr.map(ele => ele.id)
            console.log(ids);

            this.$api.deleteShopCart({ ids: ids }, res => {
                if (res.code == 0) {
                    this.showModel = false
                    this.$interactive.toast('删除成功')
                    this.GetShopCartList()
                }
            });
        },
        selectItem(item, index) {
            this.$set(item, 'select', !item.select)
        },
        selectAllFun() {
            this.shopList.forEach(ele => {
                if (this.selectAll) {
                    ele.select = false
                } else {
                    ele.select = true
                }
            });
            this.selectAll = !this.selectAll
        },
        editSku(item, index) {

        },
        orderPay() {
            let currentChildren = uni.getStorageSync('currentChildren')
            let arr = []
            this.selectArr.forEach(ele => {
                let data = {
                    childId: currentChildren.childrenId,
                    classSchduleId: ele.classScheduleId,
                    skuId: ele.productSku.id,
                    quantity: 1,
                }
                arr.push(data)
            });
            let data = {
                goods: arr,
                appId: this.$appId,
                payWay: 201,
                notes: '',
            }
            let _this = this
            this.$api.submitPayOrder(data, res => {
                if (res.code == 0) {
                    uni.requestPayment({
                        timeStamp: res.data.wxMpPayInfo.timeStamp + '',
                        nonceStr: res.data.wxMpPayInfo.nonceStr,
                        package: res.data.wxMpPayInfo.packageValue,
                        paySign: res.data.wxMpPayInfo.paySign,
                        signType: res.data.wxMpPayInfo.signType,
                        success(result) {
                            console.log('>>>>>>>>>>>>>>>>>>>orderId', res.data.orderId)
                            _this.$interactive.toast('支付成功')
                            setTimeout(() => {
                                uni.redirectTo({
                                    url: '/pages/orderDetails/orderDetails?orderId=' + res.data.orderId
                                });
                            }, 500);
                        },
                        fail(res) {
                            if (res.errMsg !== 'requestPayment:fail cancel') {
                                _this.$interactive.toast('微信支付失败，请联系客服处理')
                            }
                            console.error('支付失败', res)
                        },
                        complete(res) {
                            console.error('支付完成', res)
                        }
                    })
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.top_box {
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    padding: 30rpx;
    z-index: 555;
}
.price_number {
    color: #eb4b4b;
    .text {
        color: #666;
        font-size: 24rpx;
    }
    .price {
        font-size: 48rpx;
        font-weight: bold;
        margin: 20rpx 10rpx 20rpx 0;
    }
}
.shopList_box {
    position: relative;
    top: 100rpx;

    .right_box {
        align-items: flex-start;
        flex: 1;
        padding: 0 30rpx;
        height: 260rpx;
        .curriculum_title {
            width: 350rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: #333333;
        }
        .week_text {
            font-size: 24rpx;
            color: #666;
        }
        .price_number {
            color: #eb4b4b;
            .text {
                color: #666;
                font-size: 24rpx;
            }
            .price {
                font-size: 48rpx;
                font-weight: bold;
                margin: 20rpx 10rpx 20rpx 0;
            }
        }
        .right_bottom_box {
            width: 100%;
        }
        .sp_box {
            color: #666;
            width: 100%;
            padding: 16rpx 32rpx;
            border-radius: 36rpx;
            background: #f5f5f5;
            .more_img {
                width: 32rpx;
                height: 32rpx;
            }
        }
    }

    .shop_img {
        flex-shrink: 0;
        width: 160rpx;
        height: 160rpx;
        border-radius: 16px;
    }
}
.edit_select {
    margin-right: 30rpx;
    &.hide {
        width: 0;
    }
    image {
        width: 48rpx;
        height: 48rpx;
    }
}

.container_box + .container_box {
    margin-top: 30rpx;
}
.load_box {
    margin-top: 30rpx;
}
.buy_box {
    font-size: 28rpx;
    padding: 32rpx;
    .hear_box {
        position: relative;
        .buy_img {
            width: 240rpx;
            height: 240rpx;
            margin-right: 40rpx;
            border-radius: 16rpx;
        }
    }
    .border_box {
        border: 1rpx solid #f5f5f5;
        margin-top: 30rpx;
    }
    .buy_title {
        margin: 30rpx 0;
        color: #333;
        font-weight: bold;
    }
    .sku_item_box {
        white-space: nowrap;
        .sku_item {
            display: inline-block;
            max-width: 250rpx;
            min-width: 150rpx;
            padding: 15rpx 20rpx;
            text-align: center;
            background: #f5f5f5;
            color: #333;
            border: 1rpx solid #f5f5f5;
            border-radius: 36rpx;
            &.active {
                background: #f0f9ff;
                color: #63b9f2;
                border: 1rpx solid #63b9f2;
            }
            &.disabled {
                background: #999;
                color: #666;
                text-decoration: line-through;
            }
        }
        .sku_item + .sku_item {
            margin-left: 16rpx;
        }
    }
}
.btn_box {
    width: 100%;
    u-button {
        flex: 1;
    }
}
.title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
}
.info {
    margin: 30rpx 0 60rpx 0;
}
.mini_btn_box {
    width: 180rpx;
}
</style>
